<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-image
          :src="imageInfo.url"
          class="m-image"
          fit="cover"
          :preview-src-list="[imageInfo.url]"
        >
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
        <div class="m-label-box">
          <el-tag
            type="success"
            size="small"
            v-for="(item, index) in imageInfo.label"
            :key="index"
            class="m-label"
            >{{ item }}</el-tag
          >
        </div>
        <h3>{{ imageInfo.title }}</h3>
        <div class="m-desc">{{ imageInfo.description }}</div>
        <div class="m-time">创建者：{{ imageInfo.creator.nickname }}</div>
        <div class="m-time">创建时间：{{ imageInfo.createTime }}</div>
        <div class="m-action">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-delete"
            @click="handleDelImage(imageInfo.id)"
            style="margin-right: 10px"
            >删除
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="handleUpdImage(imageInfo.id)"
            >修改</el-link
          >
        </div>
      </el-col>
      <el-col :span="8">
        <div class="m-comment-box">
          <div v-for="(item, key) in commentsInfo.records" :key="key">
            <div class="m-comment-item">
              <el-avatar
                style="margin-right: 10px"
                :size="40"
                fit="cover"
                :src="item.creator.avatar"
              ></el-avatar>
              <div class="m-comment-content">
                <div class="m-comment-text">{{ item.creator.nickname }}</div>
                <div class="m-comment-time">{{ item.createTime }}</div>
              </div>
            </div>
            <div class="m-comment-div">{{ item.content }}</div>
            <el-link
              class="m-del-link"
              type="primary"
              :underline="false"
              icon="el-icon-delete"
              @click="handleDelComment(item.id)"
              >删除
            </el-link>
            <el-divider></el-divider>
          </div>
          <el-pagination
            background
            :hide-on-single-page="true"
            :current-page="commentsInfo.current"
            :page-size="commentsInfo.size"
            layout="total, prev, pager, next, jumper"
            :total="commentsInfo.total"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getImageById, delImageById } from "@/api/image";
import { delCommentById } from "@/api/comment";
import { getCommentList } from "@/api/comment";

export default {
  data() {
    return {
      imageInfo: {},
      commentsInfo: {
        records: [],
        total: 0,
        size: 5,
        current: 1,
      },
    };
  },
  created() {
    const imageId = this.$route.query.id;
    getImageById(imageId).then((res) => {
      this.imageInfo = res.data;
      this.fetchComments();
    });
  },
  methods: {
    handleCurrentChange(page) {
      this.commentsInfo.current = page;
      this.fetchComments();
    },
    handleUpdImage(imageId) {
      this.$router.push({
        path: "/image/mod_image",
        query: { imageId: imageId },
      });
    },
    handleDelImage(imageId) {
      this.$confirm("确认删除该图片？删除之后不可恢复").then((val) => {
        delImageById(imageId).then((_) => {
          this.$notify.success({
            title: "提示",
            message: "图片删除成功",
          });
          this.$router.push({
            path: "/image/images",
          });
        });
      });
    },
    handleDelComment(commentId) {
      this.$confirm("确认删除该评论？删除之后不可恢复").then((val) => {
        delCommentById(commentId).then((_) => {
          this.$notify.success({
            title: "提示",
            message: "评论删除成功",
          });
          this.commentsInfo = {
            records: [],
            total: 0,
            size: 5,
            current: 1,
          };
          this.fetchComments();
        });
      });
    },
    fetchComments() {
      const params = {
        page: this.commentsInfo.current,
        limit: this.commentsInfo.size,
        topicId: this.imageInfo.id,
      };
      getCommentList(params).then((res) => {
        this.commentsInfo = res.data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.m-image {
  height: 450px;
  img {
    object-fit: cover;
  }
}
.m-label-box {
  margin-top: 20px;
  .m-label {
    margin-right: 10px;
  }
}
.m-desc {
  margin: 10px 0;
  color: rgb(121, 121, 121);
  font-size: 14px;
}
.m-time {
  margin: 10px 0;
  color: rgb(121, 121, 121);
  font-size: 14px;
}
.m-comment-box {
  .m-comment-item {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .m-comment-content {
    display: flex;
    flex-direction: column;
    .m-comment-text {
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 4px;
    }
    .m-comment-time {
      color: rgb(121, 121, 121);
      font-size: 12px;
    }
  }
}
.m-comment-div {
  margin: 10px 5px;
  font-size: 14px;
}
.m-del-link {
  margin-left: 5px;
  font-size: 12px;
}
</style>

